Ext.application({
    name : 'portal',

    //Here we build our GUI from existing components - this function should only be assembling the GUI
    //Any processing logic should be managed in dedicated classes - don't let this become a
    //monolithic 'do everything' function
    launch : function() {
    	
        var cityStore = Ext.create('Ext.data.Store', {
            model : 'okcapital.model.City',
            proxy : {
                type : 'ajax',
                url : 'getAllCities.do',
                reader : {
                    type : 'json',
                    root : 'data'
                }
            }
        });
        
        var datasetStore = Ext.create('Ext.data.Store', {
            model : 'okcapital.model.Dataset',
            proxy : {
                type : 'ajax',
                url : 'getAllDatasets.do',
                reader : {
                    type : 'json',
                    root : 'data'
                }
            }
        });
        
        //Create our store for holding the set of
        //layers that have been added to the map
        var layerStore = Ext.create('portal.layer.LayerStore', {});
        
        //Create our map implementations
        var queryTargetHandler = Ext.create('portal.layer.querier.QueryTargetHandler', {});
        var map = Ext.create('portal.map.openlayers.OpenLayersMap', {
            container : null,   //We will be performing a delayed render of this map
            layerStore : layerStore,
            listeners : {
                query : function(mapWrapper, queryTargets) {
                	queryTargetHandler.handleQueryTargets(mapWrapper, queryTargets);
                }
            }
        });

        /**
         * This center panel will hold the google maps instance
         */
        var centerPanel = Ext.create('Ext.panel.Panel', {
            region: 'center',
            margins: '100 0 0 0',
            cmargins:'100 0 0 0',
            listeners : {
            	afterrender : function(panel) {
            		//Load our stores after the map renders (so we avoid early init problems)
            		datasetStore.load();
            		cityStore.load({
            			callback : function(cities) {
            				var layerFactory = Ext.create('portal.layer.LayerFactory', {
                                map : map,
                                formFactory : Ext.create('okcapital.layer.filterer.FormFactory', {}),
                                downloaderFactory : Ext.create('okcapital.layer.DownloaderFactory', {map: map, cityStore : cityStore, datasetStore : datasetStore}),
                                querierFactory : Ext.create('okcapital.layer.QuerierFactory', {map: map, cityStore : cityStore, datasetStore : datasetStore}),
                                rendererFactory : Ext.create('okcapital.layer.RendererFactory', {map: map, cityStore : cityStore, datasetStore : datasetStore})
                            });
                    		
                    		var knownLayer = Ext.create('portal.knownlayer.KnownLayer', {
                    			id : 'foo',
                    			cswRecords : []
                    		});
                    		var layer = layerFactory.generateLayerFromKnownLayer(knownLayer);
                    		layerStore.add(layer);
            			}
            		});
            	}
            }
        });
        
        var rightPanel = Ext.create('Ext.panel.Panel', {
            region: 'east',
            margins: '100 0 0 0',
            cmargins:'100 0 0 0',
            collapsed : true,
            title : 'Personalise',
            width : 800,
            layout : 'border',
            items : [{
            	xtype : 'mazlowprofilerpanel',
            	region : 'center',
            	title : 'Select the heirarchy to personalise your search',
            	width : 600,
            	datasetStore : datasetStore,
            	listeners : {
            		filterchange : function(mazlowProfilerPanel) {
            			var cityRankingPanel = mazlowProfilerPanel.ownerCt.items.getAt(1);
            			var dsProfiles = mazlowProfilerPanel.getDatasetProfiles();
            			
            			cityRankingPanel.updateRankings(dsProfiles);
            		}
            	}
            },{
            	xtype : 'cityrankingpanel',
            	region : 'east',
            	width : 200,
            	cityStore : cityStore,
            	title : 'Your best match'
            }] 
        });

        /**
         * Add all the panels to the viewport
         */
        var viewport = Ext.create('Ext.container.Viewport', {
            layout:'border',
            items:[centerPanel, rightPanel]
        });
        
        map.renderToContainer(centerPanel);
    }
});
